<?php

function get_meinishuo() 
{
	$url = "http://www.meilishuo.com/aj/getGoods/attr?frame=3&page=0&view=1&word=34439&section=hot&hi=&price=all";  
	$ch = curl_init();    
    curl_setopt($ch, CURLOPT_URL, $url);
	curl_setopt($ch, CURLOPT_GET, true); 
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
	curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 5.1; rv:19.0) Gecko/20100101 Firefox/19.0');//模拟浏览器拉取数据
	$content = curl_exec($ch);   
    curl_close($ch);
	return $content;
}

if($_GET['mls']=="true")
{
	echo get_meinishuo(); exit;
}

?>

<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>CSS+DIV等宽格子堆砌瀑布流效果</title>
<script type="text/javascript" src="/j-tool/jquery.js"></script>
<style>
*{padding:0;margin:0;}
#wrap{position:relative;zoom:1;margin:0px auto;}
#wrap li{width:250px;float:left;list-style:none;}
.boxCont{
text-align:center;
padding: 2px 0;
position:relative;margin:15px;border:1px solid #ccc;background:#eee;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
-webkit-border-radius: 60px / 5px;
-moz-border-radius: 60px / 5px;
border-radius:60px / 5px;
-webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}
.boxCont:before{
content:'';
width: 50px;
height: 50px;
top:0; right:0;
position:absolute;
display: inline-block;
z-index:-1;
-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
-moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
-o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
}
.boxCont:after{
content: '';
width: 100px;
height: 100px;
top:0; left:0;
position:absolute;
z-index:-1;
display: inline-block;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
-moz-transform: rotate(2deg) translate(20px,25px) skew(20deg);
-o-transform: rotate(2deg) translate(20px,25px) skew(20deg);
transform: rotate(2deg) translate(20px,25px) skew(20deg);
}
</style>
</head>
<body>
	<ul id="wrap"></ul>
</body>
<script type="text/javascript">

var f = function()
{
	var t = this;
		t.cid = 'wrap';
		t.W = 250;
		t.loadFlag = true;
	this.sort = function()
	{
		var h = [];
		var box = $('#' + t.cid).children('li');
		for(var i = 0; i < box.length; i++)
		{  
			var boxH = box.eq(i).height();
			if(i < 5)
			{
				h[i] = boxH;
			}else{
				var minH = Math.min.apply({},h);
				var minKey = getminKey(h, minH);
					h[minKey] += boxH;
					
				box.eq(i).css({
					"position" : 'absolute',
					"top" : minH,
					"left" : minKey * t.W
				})
			}
		}
		$('#' + t.cid).css({'width':5*t.W,'height':Math.max.apply({},h)})
		t.loadFlag = true;
	}

	this.load = function()
	{
		t.loadFlag = false;
		$.get(
			"?mls=true", 
			{frame:2,page:2,view:1,word:34369},
			function(data)
			{
				var josnData = jQuery.parseJSON(data);
				var jdata = josnData.tInfo;
				var html ='';
				for(var i=0;i<jdata.length;i++)
				{
					var w = jdata[i].poster_width;
					var h = jdata[i].poster_height;
					var src = jdata[i].show_pic;
					html += '<li><div class="boxCont" style="height:' + 200*h/w + 'px;"><img src="'+src+'" alt=""/></div></li>';
				}
				$("#wrap").append(html);
				t.sort();
			}
		);
	}
}

var F = new f;
	F.load();

/* 返回数组中某一值的对应项数 */
function getminKey(s, v) {
        for(k in s) {
                if(s[k] == v) {
                        return k;
                }
        }
};

$(window).scroll(function () {
	var scrollTop = document.documentElement.scrollTop;
	var winH = $(window).height();
	var docH = $(document).height();

	if(scrollTop + winH > docH - 200)
	{
		if(F.loadFlag)
		{
			F.load();
		}
	}
});
</script>
</html>